<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/'swiper.css" type="text/css">
</head>

<body>
    <div class="swiper">
        <div class="imgList">
            <div class="imgItem active" style="background-image: url(img/img1.webp);"></div>
            <div class="imgItem" style="background-image: url(img/img2.jpg);"></div>
            <div class="imgItem" style="background-image: url(img/img3.webp);"></div>
            <div class="imgItem" style="background-image: url(img/img4.webp);"></div>
            <div class="imgItem" style="background-image: url(img/img5.webp);"></div>
        </div>
        <div class="btnList">
            <div class="btn pre"><</div>
             <div class="btn next">></div>
        </div>
        <div class="circleList">
            <div id="i0"  class="circleItem active"></div>
            <div id="i1"  class="circleItem"></div>
            <div id="i2" class="circleItem"></div>
            <div id="i3" class="circleItem"></div>
            <div id="i4" class="circleItem"></div>
        </div>
     </div>
        <script type="text/javascript">
            var preBtn = document.querySelector(".swiper .pre");
            var nextBtn = document.querySelector(".swiper .next");
            var imgListDivs = document.querySelectorAll(".swiper .imgItem");
            var circleListDivs = document.querySelectorAll(".swiper .circleItem");
            var currentImg = 0;
            console.log(imgListDivs);

            nextBtn.onclick = function () {
                currentImg += 1;
                if (currentImg >= imgListDivs.length) {
                    currentImg = 0;
                }
               renderNumImg();
            }

            preBtn.onclick = function () {
                currentImg -= 1;
                if (currentImg < 0) {
                    currentImg = imgListDivs.length - 1;
                }
                renderNumImg();
            }

            var renderNumImg =  function(){
                 imgListDivs.forEach(function (item, i) {
                    item.classList.remove("active");
                })
                circleListDivs.forEach(function (item, i) {
                    item.classList.remove("active");
                })
                imgListDivs[currentImg].classList.add("active");
                circleListDivs[currentImg].classList.add("active");
            }

            circleListDivs.forEach(function(item,i){
                console.log(item);
                item.onclick = function(){
                    var index = parseInt(item.id[1]);
                    currentImg = index;
                    renderNumImg();
                }
            })


        </script>
</body>

</html>